<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="div01">
			<p>内容1</p>
		</div>
		
		<input id="input1" type="text" />
		<input type="button" onclick="add()" value="添加"/>
		
		<script>
			function add(){
				// 创建一个p标签节点
				var tmpP = document.createElement("p");
				// 创建一个文本节点
				var txtNode = document.createTextNode(input1.value);
				// 将文本放入p标签
				tmpP.appendChild(txtNode);
				// 将tmpP放入div01
				div01.appendChild(tmpP);
			}
		</script>
		
		<h1>删除节点</h1>
		<ul id="ul01">
			<li>
				内容1<a href="javascript:">删除</a>
			</li>
			<li>
				内容2<a href="javascript:">删除</a>
			</li>
			<li>
				内容3<a href="javascript:">删除</a>
			</li>
			<li>
				内容3<a href="javascript:">删除</a>
			</li>
		</ul>
		
		<script>
			
			var aArrs = document.getElementsByTagName("a");
			
			for(var i in aArrs){
				aArrs[i].onclick = function(){
					// this 触发这个事件对象 是链接
					ul01.removeChild(this.parentElement);
				}
			}
			
		</script>
		
	</body>
</html>
